<template>
  <div class="develop-list-view view-container">

    <div class="main-content">

      <div class="list-container">

        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="待开发"
            name="waitView"
          />
          <el-tab-pane
            label="开发中"
            name="doingView"
          />
        </el-tabs>

        <component
          :is="activeName"
          ref="refComponent"
          @handl-to="handlTo"
          @handl-set="handlSet"
        />

        <!--                <div class="filter-container">-->

        <!--                    <el-form-->
        <!--                            :inline="true"-->
        <!--                            :model="formData"-->
        <!--                            label-position="right"-->
        <!--                            size="small"-->
        <!--                            class="filter-form-inline"-->
        <!--                    >-->
        <!--                        <el-row-->
        <!--                                :gutter="40"-->
        <!--                                style="margin-left: 0px; margin-right: 0px"-->
        <!--                        >-->
        <!--                            <el-col-->
        <!--                                    :lg="5"-->
        <!--                                    :xs="4"-->
        <!--                            >-->
        <!--                                <el-form-item-->
        <!--                                        label="参与人"-->
        <!--                                        style="width: 100%"-->
        <!--                                >-->
        <!--                                    <el-select-->
        <!--                                            v-model="formData.selectType"-->
        <!--                                            clearable-->
        <!--                                            style="width: 100%"-->
        <!--                                            placeholder="请选择"-->
        <!--                                            @change="listSearch"-->
        <!--                                    >-->
        <!--                                        <el-option-->
        <!--                                                v-for="(item, idx) in typeOption"-->
        <!--                                                :key="item.id"-->
        <!--                                                :label="item.label"-->
        <!--                                                :value="item.value"-->
        <!--                                        />-->

        <!--                                    </el-select>-->
        <!--                                </el-form-item>-->
        <!--                            </el-col>-->

        <!--                            <el-col-->
        <!--                                    :lg="5"-->
        <!--                                    :xs="4"-->
        <!--                            >-->
        <!--                                <el-form-item-->
        <!--                                        label="负责职员"-->
        <!--                                        style="width: 100%"-->
        <!--                                >-->
        <!--                                    <el-select v-model="formData.headId" placeholder="请选择负责职员" @change="listSearch">-->
        <!--                                        <el-option-->
        <!--                                                v-for="item in headOptions"-->
        <!--                                                :key="item.id"-->
        <!--                                                :label="item.realName"-->
        <!--                                                :value="item.id"-->
        <!--                                        >-->
        <!--                                        </el-option>-->
        <!--                                    </el-select>-->
        <!--                                </el-form-item>-->
        <!--                            </el-col>-->

        <!--                            <template v-if="visible">-->

        <!--                                <el-col :lg="6" :xs="5">-->
        <!--                                    <el-form-item label="注册日期" style="width: 100%">-->
        <!--                                        <el-date-picker-->
        <!--                                                v-model="formData.date"-->
        <!--                                                clearable-->
        <!--                                                style="width: 100%;"-->
        <!--                                                type="daterange"-->
        <!--                                                range-separator="-"-->
        <!--                                                start-placeholder="开始日期"-->
        <!--                                                end-placeholder="结束日期"-->
        <!--                                        />-->
        <!--                                    </el-form-item>-->
        <!--                                </el-col>-->

        <!--                            </template>-->

        <!--                            <el-col-->
        <!--                                    :lg="2"-->
        <!--                                    :xs="2"-->
        <!--                            >-->
        <!--                                <el-form-item style="width: 100%">-->
        <!--                                    <el-button-->
        <!--                                            type="text"-->
        <!--                                            size="mini"-->
        <!--                                            style="color: #417ff9"-->
        <!--                                            @click="visible = !visible"-->
        <!--                                    >精简搜索-->
        <!--                                        <i-->
        <!--                                                class="iconfont icon-xiajiantou"-->
        <!--                                                style="margin-left:3px;font-size: 8px;"-->
        <!--                                                v-if="visible"-->
        <!--                                        />-->
        <!--                                        <i-->
        <!--                                                v-if="!visible"-->
        <!--                                                class="iconfont icon-shangjiantou"-->
        <!--                                                style="margin-left:3px;font-size: 8px;"-->
        <!--                                        />-->
        <!--                                    </el-button>-->
        <!--                                </el-form-item>-->
        <!--                            </el-col>-->

        <!--                            <el-col-->
        <!--                                    :lg="4"-->
        <!--                                    :xs="4"-->
        <!--                            >-->
        <!--                                <el-form-item style="width: 100%">-->
        <!--                                    <el-button class="border-btn" @click="reset">重置</el-button>-->
        <!--                                    <el-button-->
        <!--                                            type="primary"-->
        <!--                                            class="main-btn"-->
        <!--                                            @click="listSearch"-->
        <!--                                    >搜索</el-button>-->
        <!--                                </el-form-item>-->
        <!--                            </el-col>-->
        <!--                        </el-row>-->
        <!--                    </el-form>-->

        <!--                </div>-->

        <!--                <table-view-->
        <!--                        :data="tableData"-->
        <!--                        @row-click="rowClick"-->
        <!--                >-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="terminalName"-->
        <!--                            label="终端名称"-->
        <!--                            :min-width="100"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="agentName"-->
        <!--                            label="所在地区"-->
        <!--                            :min-width="250">-->
        <!--                        <template #default="scope">-->
        <!--                            <span>{{scope.row.provinceName}}/{{scope.row.cityName}}/{{scope.row.areaName}}</span>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="productPopularName"-->
        <!--                            label="产品名称"-->
        <!--                            :min-width="100">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="approvalNumber"-->
        <!--                            label="批准文号"-->
        <!--                            :min-width="150"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="packSpecs"-->
        <!--                            label="包装规格"-->
        <!--                            :min-width="100">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="准入模式"-->
        <!--                            :min-width="100"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            {{getLabel('access_mode',scope.row.accessMode)}}-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="终端价(元)"-->
        <!--                            :min-width="100">-->
        <!--                        <template #default="scope">-->
        <!--                            ¥{{scope.row.terminalPrice}}-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            prop="planName"-->
        <!--                            label="招商计划"-->
        <!--                            :min-width="100"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="开发期限至"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            {{dateFormat('yyyy-mm-dd',scope.row.expireTime)}}-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="开发保证金(元)"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            ¥{{scope.row.devEarnestMoney}}-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'first'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="最低年销量"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            <span v-if="scope.row.minSellNum">{{scope.row.minSellNum}}/{{scope.row.minSellUnit}}</span>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'first'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="销量保证金(元)"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            ¥{{scope.row.sellEarnestMoney}}-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'second'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="当前开发信息"-->
        <!--                            prop="agentName"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'second'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="营销模式"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            <span v-if="scope.row.agentType == 'direct'">终端直销</span>-->
        <!--                            <span>{{getLabel( scope.row.agentType , scope.row.agentAttribute)}}</span>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'second'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="配送商"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->

        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'second'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="负责营销职员"-->
        <!--                            prop="headName"-->
        <!--                            :min-width="100"-->
        <!--                    >-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            v-if="activeName == 'second'"-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="注册日期"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            <span v-if="scope.row.agentRegisterTime">{{dateFormat('yyyy-mm-dd',scope.row.agentRegisterTime)}}</span>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="状态"-->
        <!--                            fixed="right"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="scope">-->
        <!--                            <div>{{getStatus(scope.row)}}</div>-->

        <!--                            <div v-if="scope.row.flowStatus == 'DOING'" class="flow-status-color">审核中</div>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column-->
        <!--                            align="center"-->
        <!--                            header-align="center"-->
        <!--                            label="操作"-->
        <!--                            fixed="right"-->
        <!--                            :min-width="150"-->
        <!--                    >-->
        <!--                        <template #default="{row}">-->
        <!--                            <el-button-->
        <!--                                    v-if="activeName == 'first' && row.flowStatus != 'DOING'"-->
        <!--                                    type="text"-->
        <!--                                    @click="handlTo(row)"-->
        <!--                            >注册终端</el-button>-->

        <!--                            <el-button-->
        <!--                                    v-if="row.devStatus == 2 || row.devStatus == 4"-->
        <!--                                    type="text"-->
        <!--                                    @click="handlSet(row)"-->
        <!--                            >设置配送信息</el-button>-->

        <!--                            <el-button-->
        <!--                                    v-if="row.devStatus == 2 || row.devStatus == 4"-->
        <!--                                    @click="handlFailure(row)"-->
        <!--                                    type="text"-->
        <!--                            >开发失败</el-button>-->
        <!--                        </template>-->
        <!--                    </el-table-column>-->
        <!--                </table-view>-->

        <!--                <Pagination-->
        <!--                        v-model:page="formData.page"-->
        <!--                        v-model:limit="formData.pageSize"-->
        <!--                        style="display: flex; justify-content: flex-end"-->
        <!--                        :total="total"-->
        <!--                        @pagination="getListData"-->
        <!--                />-->

      </div>

    </div>
    <registered
      ref="registeredDialog"
      @succsessReg="succsess"
    />

    <!--设置配送信息-->
    <setiDelivery
      ref="setiDeliveryDialog"
      @distributeSuccsess="succsess"
    />
  </div>

</template>

<script>
import waitView from './modules/waitView'
import doingView from './modules/doingView'
import setiDelivery from "../../../marketing/customer/terminal/modules/setiDelivery";
import {useRouter} from 'vue-router'
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onBeforeMount,
  reactive,
  ref,
  toRefs,
} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    registered: defineAsyncComponent(() =>
      import('../../../marketing/customer/terminal/modules/registered.vue')
    ),
    setiDelivery,
    waitView,
    doingView,
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    const typeOption = ref([
      {
        label: '全部',
        value: '',
      },
      {
        label: '我负责的',
        value: '1',
      },
      {
        label: '我下级负责的',
        value: '2',
      },
      {
        label: '我部门负责的',
        value: '3',
      },
    ])
    var headOptions = ref([])
    var visible = ref(false)
    var data = reactive({
      tableData: [],
      total: 0,
      formData: {
        page: 1,
        pageSize: 20,
        selectType: '',
        productId: 0,
        terminalId: 0,
        agentId: 0,
        devStatus: '',
        devStatusType: 1,
        headId: '',
        date: [],
      },
      activeName: 'waitView',
      registeredDialog: null,
      setiDeliveryDialog: null,
      refComponent: null,
    })

    const getListData = () => {
      // data.formData.devStatusType = data.activeName == 'first' ? 1 : 2
      //
      // let a = JSON.parse(JSON.stringify(data.formData))
      // a.headId = Number(a.headId)
      // if (a.date && a.date.length){
      //     a.registerStartTime = a.date[0]
      //     a.registerEndTime = a.date[1]
      // }
      // api.supplyChannels.SUPPLY_CHANNELS_LIST(a).then(res=>{
      //     if (!res.code && res.data){
      //         data.tableData = res.data.list
      //         data.total = res.data.total
      //     }
      // })
    }

    const handleClick = () => {
      // data.formData.page = 1
      // data.tableData = []
      // getListData()
    }

    const listSearch = () => {
      data.formData.page = 1
      data.tableData = []
      getListData()
    }

    const reset = () => {
      data.formData.selectType = ''
      data.formData.page = 1
      data.formData.headId = ''
      data.formData.date = []
      data.tableData = []
      getListData()
    }

    const rowClick = (row) => {}

    const getStatus = (row) => {
      switch (row.devStatus) {
        case '-2':
          return '开发失败'
        case '-1':
          return '审核未通过'
        case '1':
          return '待开发'
        case '2':
          return '开发中'
        case '4':
          return '待进货'
        case '5':
          return '开发成功'
      }
    }

    onBeforeMount(() => {
      getListData()
      handlHead()
    })

    // 获取负责人
    const handlHead = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          headOptions.value = res.data
        }
      })
    }

    const handlTo = (row) => {
      console.log(row, '---------------------')
      data.registeredDialog.open(row, null, 1)
    }

    const succsess = () => {
      // getListData()
      data.refComponent.refreshData()
    }

    const handlFailure = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '确定更改此渠道关系为开发失败？',
          title: '开发失败',
        })
        .then(() => {
          api.terminal.TERMINAL_FAILURE(row.id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getListData()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    // 设置配送信息
    const handlSet = (val) => {
      data.setiDeliveryDialog.open(val, val.id)
    }

    return {
      typeOption,
      visible,
      ...toRefs(data),

      getListData,
      handleClick,
      listSearch,
      rowClick,
      getStatus,
      handlTo,
      succsess,
      reset,
      handlFailure,
      handlSet,
      headOptions,
    }
  },
})
</script>

<style scoped>
</style>
